<template>
  <section class="ProjectModuleIndex-container">
    <project-module-search ref="search" @onSearch="doSearch">
      <project-module-list :projects="projects">
        <template slot="action-bar">
          <quick-action-bar>
            <quick-icon-button
              icon="icon-icon_xinzeng"
              tooltip="新增"
              @click="showAddDialog()"
            />
            <quick-icon-button
              icon="icon-daochu"
              tooltip="返回"
              @click="returnProject"
            />
          </quick-action-bar>
        </template>
        <template slot="row-action-bar" slot-scope="scope">
          <quick-action-bar>
            <quick-icon-button
              icon="icon-xiugai"
              tooltip="编辑"
              @click="showEditDialog(scope.row)"
            />
            <quick-icon-button
              icon="icon-shanchu"
              tooltip="删除"
              @click="deleteproject(scope.row.id)"
            />
            <quick-icon-button
              icon="icon-xiangqing-copy"
              tooltip="详情"
              @click="detailModule(scope.row)"
            />
          </quick-action-bar>
        </template>
      </project-module-list>
    </project-module-search>

    <project-module-add ref="addDialog" @added="refresh" />
    <project-module-edit ref="editDialog" @edited="refresh" />
  </section>
</template>

<script>
import ProjectModuleSearch from "./ProjectModuleSearch.vue";
import ProjectModuleList from "./ProjectModuleList";
import ProjectModuleAdd from "./ProjectModuleAdd.vue";
import ProjectModuleEdit from "./ProjectModuleEdit.vue";
import _api from "../../common/api/project_module";

export default {
  components: {
    ProjectModuleSearch,
    ProjectModuleList,
    ProjectModuleAdd,
    ProjectModuleEdit,
  },
  data() {
    return {
      projects: [],
    };
  },
  methods: {
    doSearch(projects) {
      this.projects = projects;
    },

    detailModule(scope) {
      this.$router.push({
        name: "needsList",
        params: { module: scope },
      });
    },

    showAddDialog() {
      this.$refs.addDialog.showDialog();
    },

    showEditDialog(project) {
      this.$refs.editDialog.showDialog(project);
    },

    deleteproject(id) {
      console.log(id);
      this.$confirm("你确定删除此项吗？", "确认删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            await _api.deleteAsync(id);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.refresh();
          } catch (error) {
            this.$message({
              type: "info",
              message: `删除失败，${error}`,
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    refresh() {
      this.$refs.search.getModule();
    },

    returnProject() {
      this.$router.push({
        name: "ProjectList",
      });
    },
  },
  mounted() {},
};
</script>

<style scoped lang="scss">
.ProjectModuleIndex-container {
  height: 100%;
}
</style>